<template>
  <div style="display: flex; gap: 10px; justify-content: space-between">
    <Input v-bind="attrs" v-model:value="_value" style="flex: 1" />
    <Button @click="handleClear">清除</Button>
  </div>
</template>
<script lang="ts" setup>
  import { ref, useAttrs, watch } from 'vue';
  import { Input, Button } from 'ant-design-vue';
  const attrs = useAttrs() as any;

  const props = defineProps({
    modelValue: {
      type: [Number, String] as PropType<number | string>,
      default: '',
    },
  });
  const emit = defineEmits(['update:modelValue']);
  const _value = ref<number | string>('');
  watch(
    () => props.modelValue,
    (newVal) => {
      _value.value = newVal;
    },
    {
      immediate: true,
    },
  );
  watch(
    () => _value.value,
    () => {
      emit('update:modelValue', _value.value);
    },
  );

  const handleClear = () => {
    _value.value = '';
  };
</script>
